{extend name="common/main"}

{block name="css"}
<link type="text/css" rel="stylesheet" href="/static/baidumap/css/bdmapStyle.css">
<style type="text/css">
    .theme-white .tpl-table-black thead > tr > th {
        font-size: 12px;
    }
    .theme-white .widget {
        padding: 10px 10px 13px;
    }
</style>
{/block}

{block name="body"}
<body data-type="widgets">
{include file="common/index"}
<!--<div><input type="number" name="" class="setRadio" value="" /></div>-->
<div class="col-sm-2">
    <div class="row">
        <div class="am-u-sm-2 am-u-md-2 am-u-lg-2">
            <div class="widget am-cf">
                <div class="mod_box">
                    <div id="slectCustMsge" class="bd profile">
                        <!--添加栅栏-->
                        <button type="button" class="am-btn am-btn-success" id="doc-prompt-toggle" style=" font-size: 12px;margin-top: 5px;margin-right: 0" onclick="addGeofence();">新增电子栅栏</button>
                        <!--分组内容-->
                        <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black " id="example-r">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>名称</th>
                                <th>半径(米)</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="gradeX">
                                <td>1</td>
                                <td>lai</td>
                                <td>500</td>
                                <td>
                                    <div class="tpl-table-black-operation">
                                        <a href="modify.html">
                                            <i class="am-icon-pencil"></i> 删除
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-sm-10" >
    <div id="allmap" class="tpl-content-wrapper"></div>
</div>
<!--<div class="radioTip" style="position: absolute;left:0;top:0;background: #fff;font-size:13px;border: 1px solid blue;padding:3px;">半径 米</div>-->
<!--弹框信息-->
<div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt">
    <div class="am-modal-dialog">
        <div class="am-modal-bd">
            <div class="am-form-group">
            <label  class="am-u-sm-3">分组名称:</label>
            <div class="am-u-sm-8">
                <input type="text" class="am-modal-prompt-input">
            </div>
            </div>
            <div class="am-form-group">
            <label  class="am-u-sm-3">半径:</label>
            <div class="am-u-sm-8">
                <input type="text" class="am-modal-prompt-input setRadio" name="" value="">
            </div>
            </div>
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>
</body>
{/block}

{block name="js"}
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2COzFaICuIyVj7V3VetKfmdRVnX8BhVr"></script><!--百度地图api-->
<script type="text/javascript" src="/static/baidumap/js/jquery.bdmap.js"></script><!--百度地图API模块化成函数供前台调用-->
<script type="text/javascript">

    // 百度地图API功能
    var map = new BMap.Map("allmap"); // 创建Map实例
//    BDMapInit(map,{"isNumc":1,"city":"北京","point":"116.404,39.915","zoom":"15"});
    //显示个人标点
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
    var myIcon = new BMap.Icon('/static/baidumap/img/user.png',new BMap.Size(32,32));
    var mk = new BMap.Marker(point,{icon:myIcon});//创建标注图标

    map.addOverlay(mk);//将标注添加到地图中
//        var $pointJson = {"l_point":116.404,"r_point": 39.915,"title":"北京","description":"泉州市丰泽区丰泽街中段","style":"","icon":"/static/baidumap/img/user.png"}
//         createMapPoint($pointJson,{"showDetails":false});

        //添加电子栅栏
    function addGeofence() {
        var mPoint = new BMap.Point(map.getCenter().lng,map.getCenter().lat); // 初始化地图中心点
        var circleArr=[]; //存储circle覆盖物的数组
        var labelArr=[]; //存储文本标记的数组
        var setRadio=document.querySelector(".setRadio");
        map.enableScrollWheelZoom();
        map.centerAndZoom(mPoint,15);
        var circle = new BMap.Circle(mPoint,500,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3,enableEditing:true});
        map.addOverlay(circle);
        circleArr.push(circle);
    function showRadius(obj){
//清除全部的文本标记
        for(var i=0;i<labelArr.length;i++){
            map.removeOverlay(labelArr[i]);
        }
        var opts = {
            position :obj.point, // 指定文本标注所在的地理位置
            offset : new BMap.Size(10, -10) //设置文本偏移量
        };
        if(obj.radius){
            var label = new BMap.Label(obj.radius+'米', opts); // 创建文本标注对象
            $(setRadio).val(obj.radius); //显示
        }else{
            var label = new BMap.Label(circle.getRadius()+'米', opts); // 创建文本标注对象
            $(setRadio).val(circle.getRadius());
        }
        label.setStyle({
            fontSize : "12px",
            height : "20px",
            lineHeight : "20px",
            fontFamily:"微软雅黑",
            borderColor:"blue"
        });
        map.addOverlay(label);
        labelArr.push(label);

    }

    if (mPoint != null){
        circle.addEventListener("lineupdate", function (e) {
            circle.oc[1].ondragging=showRadius(e);
            showRadius({
                point:circle.oc[1].point
            });
        });

    }

    setRadio.onkeyup=setRadio.onchange=function(){
//清除圆形覆盖物
        for(var i=0;i<circleArr.length;i++){
            map.removeOverlay(circleArr[i]);
        }
//清除文本标记
        for(var i=0;i<labelArr.length;i++){
            map.removeOverlay(labelArr[i]);
        }
//清除完毕后重新制作圆形覆盖物
        var circle = new BMap.Circle(mPoint,circleRadius,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
        var circleRadius=parseInt(this.value); //获取用户设置的半径值
        circle.setRadius(circleRadius) //设置圆形覆盖物的半径
        map.addOverlay(circle); //将圆形覆盖物添加到地图上
        circle.enableEditing(); //设置圆形覆盖物可编辑
        circleArr.push(circle); //将该园形覆盖物存于数组中,以便再次设置之前进行清除
        console.log(circleArr);
//调用showRadius方法展示文本标记
        showRadius({
            point:circle.oc[1].point,
            radius:circleRadius
        });

        if (mPoint != null){
//为圆行覆盖物添加监听事件
            circle.addEventListener("lineupdate", function (e) {
//为圆上点添加拖拽事件
                circle.oc[1].ondragging=function(e){
                    for(var i=0;i<labelArr.length;i++){
                        map.removeOverlay(labelArr[i]);
                    }
                    var opts = {
                        position : e.point, // 指定文本标注所在的地理位置
                        offset : new BMap.Size(10, -10) //设置文本偏移量
                    }
                    var label = new BMap.Label(circle.getRadius()+'米', opts); // 创建文本标注对象
                    $(setRadio).val(circle.getRadius());
                    label.setStyle({
                        fontSize : "12px",
                        height : "20px",
                        lineHeight : "20px",
                        fontFamily:"微软雅黑",
                        borderColor:"blue"
                    });
                    map.addOverlay(label);
                    labelArr.push(label);
                }

            });
        }
    }
//    var local = new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});
//    local.searchNearby('餐馆',mPoint,1000);//显示周边1000米内的餐馆
    //弹框事件
    $(function() {
        $('#doc-prompt-toggle').on('click', function() {
            $('#my-prompt').modal({
                relatedTarget: this,
                onConfirm: function(e) {
                    alert('你输入的是：' + e.data || '')
                },
                onCancel: function(e) {
                    alert('不想说!');
                }
            });
        });
    });
    }









</script>
{/block}